import { useContext, useEffect, useState } from 'react';
import { Button, ModalContext, Table, type ColumnProps } from '../../functionalComponent';
import { Layout, iup } from '../../util';
import { createOrUpdateContent, deleteContentById, getCommonWordHelp } from './service';
import { NGLang, wfAlert } from './util';

/**
 * 编辑常用语
 * @param callback 确认回调
 * @constructor
 */
export function WFCommonPhrases({ callback }) {
  const mCtx = useContext(ModalContext);
  const [tableloading, settableloading] = useState(true);
  const [addButtonLoading, setaddButtonLoading] = useState(false);
  const [deleteButtonLoading, setdeleteButtonLoading] = useState(false);
  const [deletetList, setDeletetList] = useState(new Array());
  const [ds, setDs] = useState([]);

  useEffect(() => {
    mCtx.ins.setApi({
      invokeOkHandler: async () => {
        console.log(iup.getCmpApi('editCommonPhrasesTable').validData(), 'sds');
        if (!iup.getCmpApi('editCommonPhrasesTable')?.validData()) {
          wfAlert('错误提示', '常用语不能为空');
          return;
        }
        callback();
        mCtx.ins?.destroy();
      }
    });
  }, []);
  useEffect(() => {
    getCommonWordHelp().then((res) => {
      setDs(res);
      settableloading(false);
    });
  }, []);
  const columns: ColumnProps[] = [
    {
      dataIndex: 'id',
      hidden: true
    },
    {
      title: '常用语句',
      width: 80, // flex 存在时，width 为最小宽度
      flex: 1,

      dataIndex: 'content',
      editor: {
        xtype: 'input',
        required: true,
        listeners: {
          onChange(e) {
            console.log(e);
            createOrUpdateContent(e.value, e?.row?.id);
          }
        }
      }
    }
  ];

  return (
    <div style={{ padding: '10px 20px 0 20px', height: 340 }}>
      <Layout>
        <Layout style={{ marginBottom: '10px' }} direction="row">
          <Button
            style={{ width: '80px', marginRight: '10px' }}
            type="primary"
            loading={addButtonLoading}
            onClick={() => {
              setaddButtonLoading(true);
              createOrUpdateContent(NGLang.commonPhrases).then((res) => {
                if (res.code === 0) {
                  iup.getCmpApi('editCommonPhrasesTable').addRows({ id: res.data, content: NGLang.commonPhrases });
                }
                if (res) {
                  setaddButtonLoading(false);
                }
              });
            }}
          >
            新增
          </Button>
          <Button
            style={{ width: '80px' }}
            loading={deleteButtonLoading}
            disabled={deletetList.length == 0}
            onClick={async () => {
              setdeleteButtonLoading(true);
              settableloading(true);
              deleteContentById(deletetList.map((i) => i.id)).then((res) => {
                if (res) {
                  getCommonWordHelp().then((res) => {
                    setDs(res);
                    setDeletetList([]);
                    settableloading(false);
                  });
                }
              });
            }}
          >
            删除
          </Button>
        </Layout>
        <Layout.Flex>
          <Table
            bordered
            checkbox
            loading={tableloading}
            onCheckedChange={(a, b) => {
              setDeletetList(a);
            }}
            editColumnIcon
            style={{ height: 250 }}
            id="editCommonPhrasesTable"
            columns={columns}
            dataSource={ds}
          />
        </Layout.Flex>
      </Layout>
    </div>
  );
}
